import { EChartsOption } from 'echarts'
import { memo, useRef, useState } from 'react'
import useEcharts from '@/hooks/useEcharts'
import styles from './index.module.less'
import { getUserData } from '../../service'
import { isNullArray, isNullData } from '@/utils'

const optionMap: EChartsOption = {
  title: {
    text: '浙江省',
    // subtext: '测试第一季度数据',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c}',
  },
  visualMap: {
    min: 0,
    max: 50,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#E6ECFC', '#4879FE'],
    },
  },
  series: [
    {
      name: '浙江',
      type: 'map',
      map: 'Zhejiang',
      label: {
        show: true,
      },
      data: [],
    },
  ],
}

export default memo(() => {
  const mapRef = useRef<HTMLDivElement>(null)
  const [total, setTotal] = useState<number>(0)

  useEcharts(mapRef, optionMap, async (chart) => {
    const res = await getUserData({})
    let option: EChartsOption = {}
    if (isNullData(res) && res.data && isNullArray(res.data)) {
      setTotal(res.data.hospitalTotalCount)
      option = {
        series: [
          {
            data: res.data.cityDataList.map((item) => ({
              name: item.cityName,
              value: item.hospitalTotalCountByCity ? item.hospitalTotalCountByCity : 0,
            })),
          },
        ],
      }
      chart.setOption(option)
    }
  })

  return (
    <>
      <div style={{ height: '100%' }} ref={mapRef}></div>
      <div className={styles.total}>
        <span className={styles.circle}></span>
        平台总用户量
        <span className={styles.txt}>{total}</span>
        <span style={{ fontSize: '14px', color: '#2ECABA' }}>家</span>
      </div>
    </>
  )
})
